<template>
    <div class='isCollaging'>
        <div class='personItem'>
        <img :src='collagelist.wximage' class='userImg'>
        <div class="m-person-con">
          <div class='txtOverflow'>{{collagelist.Name}}</div>
          <div class='restTime txtOverflow'>
            {{collagelist.time}}
          </div>
        </div>
        <div class='restTime'>还差{{collagelist.surplus_number}}人</div>
        <to-collage @click.native="toCollagepage(collagelist.spelling_id)">去拼团</to-collage>
      </div>
    </div>
</template>
<script>
export default {
    name:'',
    props:['collagelist'],
    data() {
        return {
          base_url:process.env.API_HOST,
          countTime:'',
        }
    },
    components: {
        toCollage:()=>import('./toCollege'),
    },
    methods: {
      toCollagepage(spelling_id) {
        this.$router.push({name:'spellingShare',query:{spelling_id:spelling_id}});
      }
    },
    mounted() {
      this.countTime = this.collagelist.time;
    }
}
</script>
<style lang="less" scoped>
.isCollaging{
    border-bottom: 1px solid @background-gray;
}
.userImg{
  width: 2.3rem;
  height: 2.3rem;
  border-radius: 100%;
}
.m-person-con{
    flex:1;
}
.personItem{
  .flex;
  align-items: center;
  font-size: 0.8rem;
  padding: 0.6rem 0;
  border-bottom: 2rpx solid #f2f2f2;
}
.restTime{
  font-size: .6rem;
  color: #999999;
}
/* 昵称部分超出隐藏 */
.txtOverflow{
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 1rem;
  white-space: nowrap;
}
</style>
